﻿@model IEnumerable<FaceSharp.MVC.Areas.FacebookApp.Controllers.AdvancedController.Page>

@{
    ViewBag.Title = "NbaFans";
    Layout = "~/Areas/FacebookApp/Views/Shared/_FacebookApp.cshtml";
}

<h2>NBA Fans</h2>

<div id="breadcrumb">@Html.ActionLink("Back to Test Suite", "Index","Test")</div>

<p>
   <a href="@Url.Action("NbaFansData")" target="_new">JSON Output of this data</a> 
</p>
<table>
    <tr>
        <th colspan="2"> NBA Teams</th>
    </tr>

@foreach (var page in Model) {
    <tr>
        <td style="vertical-align: top">
            <a href="@page.PageUrl" target="_new"><img src="@page.PicSquare"/></a>
        </td>
        <td  style="vertical-align: top">
            <h2><a href="@page.PageUrl" target="_new">@page.Name</a></h2>(total fans: @page.FanCount friends that are fans: @page.Fans.Count )<br/>
            General Info: <br/>
            <p>@page.Generalinfo</p>
            
            @if(page.Fans != null)
            {
                <ul class="table-of-contents">
                    @foreach(var user in page.Fans)
                    {
                        <li><img src="https://graph.facebook.com/@user.Id/picture"/> @user.Name</li>
                    }
                </ul>
            }
        </td>
    </tr>
}

</table>
